@charset "UTF-8";

@import '_reset';
@import '_common';

// 中间
section {
	padding: r(89) 0 r(96);
	width: 100%;
	height: 100%;
	overflow: auto;	
	.container_01 {
		.header {
			position: relative;
			margin-top: r(7);
			width: 100%;
			height: r(222);
			img {
				width: 100%;
				display: block;
			}
			.liaojie {
				display: flex;
				position: absolute;
				left: r(28);
				bottom: r(14);
				width: r(305);
				height: r(58);
				background-color: white;
				text-align: center;
				line-height: r(58);
				color: $color;
				p {
					width: r(243);
					font-size: r(26);
				}
				.h_arrow {
					height: 100%;
					width: r(62);
					text-align: center;
					position: relative;
					img {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						width: r(21);
						height: r(41);
						// width: 100%;
						display: block;
					}
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: r(1);
						height: r(50);
						background-color: $color;
					}
				}
			}
		}
		.swiper {
			position: relative;
			width: 100%;
			height: r(355);
			overflow: hidden;
			img {
				width: 100%;
				display: block;
			}
			.mask {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: r(104);
				background-color: rgba(0,0,0,.5);
				padding: 0 r(20) 0 r(30);
				color: white;
				.m_title {
					margin-top: r(23);
					font-size: r(26);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.date {
					margin-top: r(20);
					display: flex;
					font-size: 17px;
					justify-content: space-between;
					font-size: r(17);
					.date_left {
						display: flex;
						i {
							font-size: r(17);
						}
						i:first-of-type {
							margin-right: r(44);
						}
					}
					.date_right {
						
					}
				}
			}
		}
		.main {
			margin: r(44) auto 0;
			width: r(584);
			padding-bottom: r(29);
			a {
				display: flex;
				justify-content: space-between;
				.m_left {
					flex-shrink: 0;
					width: r(209);
					height: r(141);
					img {
						width: 100%;
						display: block;
					}
				}
				.m_right {
					width: r(358);
					.m_title {
						font-size: r(22);
						font-weight: bold;
						text-align: justify;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						color: black;
					}
					.m_content {
						font-size: r(20);
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-align: justify;
						margin-top: r(5);
						color: #cdcdcd;
					}
					.date {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: r(18);
						color: #939393;
						margin-top: r(20);
						span {
							margin-left: r(20);
							i {
								font-size: r(18);
							}
						}
					}
				}
			}
			&:not(:last-of-type) {
				border-bottom: 1px solid #d8d8d8;
			}
		}
		.more {
			width: r(584);
			text-align: center;
			border-top: 1px solid #cecece;
			margin: 0 auto;
			padding: r(20) 0;
			font-size: r(22);
			color: #bbbbbb;
		}
	}
}